<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格联系</title>
    <link rel="stylesheet" href="/css/reset.css">  <!--清除浏览器默认样式 -->
    <link rel="stylesheet" href="/css/public.css">
    <style>

        table,th,td{
            border: 1px solid black;
        }
        table {
            font-size:12px;
            width: 500px;
            margin: auto;
            /* 块元素左右居中 */
            /* 行内元素左右居中、左右居中内容 */
            /*border-spacing: 0px;  指定边框之间的距离 */
            border-collapse: collapse;
            /* 设置边框直接合并、有这个可以忽略border-spacing: 0px; */
        }
        tbody{color: red;}
        th, td{
            height: 50px;
            text-align: center;
            vertical-align: middle; /* 上下居中 */
        }
    </style>
</head>

<body>
        <table>
            <thead> <!-- 标题部分 -->
                <tr> <!-- 标题行 -->
                    <th>序号</th> <!-- 标题列 -->
                    <th>姓名</th>
                    <th>性别</th>
                    <th>年龄</th>
                    <th>地址</th>
                </tr>
            </thead>
            <tbody> <!-- 内容部分 -->
                <tr> <!-- 内容行 -->
                    <td>1</td> <!-- 内容列 -->
                    <td>孙悟空</td>
                    <td rowspan="4">男</td>
                    <td>18</td>
                    <td>花果山</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>猪八戒</td>
                    <td>28</td>
                    <td>高老庄</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>沙悟净</td>
                    <td>38</td>
                    <td>流沙河</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>唐僧</td>
                    <td>18</td>
                    <td rowspan="2">女儿国</td>
                </tr>
                <tr>
                    <td>5</td>
                    <td>女儿国国王</td>
                    <td>女</td>
                    <td>16</td>
                </tr>
            </tbody>
            <tfoot> <!-- 底部部分 -->
                <tr>
                    <td colspan="2">描述：</td>
                    <td colspan="3">西游记名人</td>
                </tr>
            </tfoot> <!-- 底部部分 -->
        </table>
</body>

</html>